<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/zqmbootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/common.css">
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/index.css">
    <style>
        h4 {
            padding-bottom: 5px;
            color: #f87d67;
            border-bottom: 3px solid #f07491;
        }
        .rec-item{
            background-color: aqua;
            height: 180px;
        }
        .cover{
            height: 150px;
            background-color: blue;
        }
        #top-title>span{
            padding-left: 10px;
        }
        .top-def{
            color: #f5b96b;
            font-size: 20px;
        }
        .top-active{
            color: #fc8906;
            font-size: 30px;
        }
        .top-context-item{
            background-color: #f87d67;
            height: 100px;
        }
        .item-img{
            background-color: #90f867;
            height: 80px;
            margin: 10px;
        }
    </style>
    <script>
        $(document).ready(function () {
            getWeekContext($(".new_anime_btn_current").html());

            addLimit();

            function addLimit() {
                $(".pagination>li").click(function () {
                    let animationSimple;
                    let parent = $(this).parent();
                    if (!($(this).hasClass("disabled") || $(this).hasClass("active"))) {
                        let model = $(this).parent().attr("id");
                        let total;
                        let num;
                        let currentPage;
                        if (model == "RecommendedLimit") {
                            animationSimple = $("#Recommended");
                            total = ${requestScope.RecommendedLimit.total};
                            num = ${requestScope.RecommendedLimit.num};
                            currentPage = $(this).children().html();
                            if (currentPage == "上一页") {
                                $("#RecommendedLimit").children().each(function () {
                                    if ($(this).hasClass("active")) {
                                        currentPage = -1 + Number($(this).children().html());
                                    }
                                })
                            }
                            if (currentPage == "下一页") {
                                $("#RecommendedLimit").children().each(function () {
                                    if ($(this).hasClass("active")) {
                                        currentPage = 1 + Number($(this).children().html());
                                    }
                                })
                            }
                        } else if (model == "RecentlyLimit") {
                            animationSimple = $("#Recently");
                            total = ${requestScope.RecentlyLimit.total};
                            num = ${requestScope.RecentlyLimit.num};
                            currentPage = $(this).children().html();
                            if (currentPage == "上一页") {
                                $("#RecentlyLimit").children().each(function () {
                                    if ($(this).hasClass("active")) {
                                        currentPage = -1 + Number($(this).children().html());
                                    }
                                })
                            }
                            if (currentPage == "下一页") {
                                $("#RecentlyLimit").children().each(function () {
                                    if ($(this).hasClass("active")) {
                                        currentPage = 1 + Number($(this).children().html());
                                    }
                                })
                            }
                        }

                        $.ajax({
                            url:"${pageContext.request.contextPath}/animation/indexJump",
                            type:"post",
                            data:{"model":model,"total":total,"num":num,"currentPage":currentPage},
                            dataType:"json",
                            success:function (data) {
                                let limit = data.data.limit;
                                let list = data.data.list;
                                let context = ``;
                                if (limit.currentPage == 1) {
                                    context = context + `<li class="disabled"><a>上一页</a></li>`;
                                } else {
                                    context = context + `<li><a>上一页</a></li>`;
                                }
                                for (let i = 0; i < limit.pages.length; i++) {
                                    if (limit.pages[i] == limit.currentPage) {
                                        context = context + `
                                        <li class="active"><a>` + limit.pages[i] + `</a></li>
                                    `;
                                    } else {
                                        context = context + `
                                        <li><a>` + limit.pages[i] + `</a></li>
                                    `;
                                    }
                                }
                                if (limit.currentPage == limit.maxPage) {
                                    context = context + `<li class="disabled"><a>下一页</a></li>`;
                                } else {
                                    context = context + `<li><a>下一页</a></li>`;
                                }
                                parent.html(context);
                                addLimit();
                                context = ``;
                                for (let i = 0; i < list.length ; i++) {
                                    let anim = list[i];
                                    context = context + `
                                        <li class="anime_icon1">
                                            <a href="${pageContext.request.contextPath}/animation/show_detailed?aid=` + anim.animationSimple.aid + `">
                                            <img referrerpolicy="no-referrer" class="anime_icon1_img" src="${pageContext.request.contextPath}/` + anim.animationSimple.cover_img + `" width="120px" height="165px">
                                            <span class="anime_icon1_name1">` + anim.animationSimple.score + `</span></a>
                                            <a class="anime_icon1_name_a" href="${pageContext.request.contextPath}/animation/show_detailed?aid=` + anim.animationSimple.aid + `">
                                                <div class="anime_icon1_name">` + anim.animationSimple.aname + `</div>
                                            </a>
                                        </li>
                                    `;
                                }
                                animationSimple.html(context);
                            }
                        })
                    }
                })
            }


            // 每周放送点击事件
            $("#new_anime_btns>li").click(function () {
                $(".new_anime_btn_current").removeClass("new_anime_btn_current");
                $(this).addClass("new_anime_btn_current");
                getWeekContext($(this).html());
            })
        })

        // 每周放送方法
        function getWeekContext(week) {
            $.get("${pageContext.request.contextPath}/animation/weekFlash",{"week":week},
                function (data) {
                    if (data.flag) {
                        data = data.data;
                        let weekContext = ``;
                        for (let i = 0; i < data.length; i++) {
                            let item = data[i].animationSimple;
                            weekContext = weekContext + `
                                <li class="one_new_anime">
                                    <a class="one_new_anime_name" href="`+ "${pageContext.request.contextPath}/animation/show_detailed?aid=" + item.aid +`">` + item.aname + `</a>
                                    <a class="one_new_anime_ji" href="` + "${pageContext.request.contextPath}/animation/show_detailed?aid=" + item.aid + `">分数:` + item.score + `</a>
                                </li>
                            `;
                        }
                        $("#new_anime_page").html(weekContext);
                    } else {
                        $("#new_anime_page").html(data.errorMsg);
                    }
                },"json"
            )
        }
    </script>
</head>
<body>
    <c:import url="WEB-INF/user_view/component/header.jsp"></c:import>
    <body>
    <div id="root">
        <div class="div_right baseblock">
            <div class="blocktitle">每周放送列表</div>
            <div class="blockcontent">
                <ul id="new_anime_btns">
                    <li id="new_anime_page_btn_1" class="new_anime_btn highlighttag">周一</li>
                    <li id="new_anime_page_btn_2" class="new_anime_btn highlighttag">周二</li>
                    <li id="new_anime_page_btn_3" class="new_anime_btn highlighttag">周三</li>
                    <li id="new_anime_page_btn_4" class="new_anime_btn highlighttag new_anime_btn_current">周四</li>
                    <li id="new_anime_page_btn_5" class="new_anime_btn highlighttag">周五</li>
                    <li id="new_anime_page_btn_6" class="new_anime_btn highlighttag">周六</li>
                    <li id="new_anime_page_btn_0" class="new_anime_btn highlighttag">周日</li></ul>
                <ul id="new_anime_page">

                </ul>
            </div>
        </div>

        <div class="div_left baseblock">
            <div class="blocktitle">
                <a href="/recommend">每日推荐</a></div>
            <div class="blockcontent">
                <ul class="ul_li_a5" id="Recommended">
                    <c:forEach items="${requestScope.Recommended}" var="item">
                        <li class="anime_icon1">
                            <a href="${pageContext.request.contextPath}/animation/show_detailed?aid=${item.animationSimple.aid}">
                                <img referrerpolicy="no-referrer" class="anime_icon1_img" src="${pageContext.request.contextPath}/${item.animationSimple.cover_img}" alt="${item.animationSimple.aname}" width="120px" height="165px">
                                <span class="anime_icon1_name1">${item.animationSimple.score}</span></a>
                            <a class="anime_icon1_name_a" href="${pageContext.request.contextPath}/animation/show_detailed?aid=${item.animationSimple.aid}">
                                <div class="anime_icon1_name">${item.animationSimple.aname}</div></a>
                        </li>
                    </c:forEach>
                </ul>
                <ul class="pagination" id="RecommendedLimit">
                    <li class="${requestScope.RecommendedLimit.hasPre() ? "" : "disabled"}"><a>上一页</a></li>
                    <c:forEach items="${requestScope.RecommendedLimit.pages}" var="item">
                        <li class="${requestScope.RecommendedLimit.currentPage == item ? "active" : ""}"><a>${item}</a></li>
                    </c:forEach>
                    <li class="${requestScope.RecommendedLimit.hasNext() ? "" : "disabled"}"><a>下一页</a></li>
                </ul>
            </div>

            <hr class=" clear" style="width: 98%; color: #f65719">

            <div class="blocktitle">
                <a href="/update">最近更新</a></div>
            <div class="blockcontent">
                <ul class="ul_li_a5" id="Recently">
                    <c:forEach items="${requestScope.Recently}" var="item">
                        <li class="anime_icon1">
                            <a href="${pageContext.request.contextPath}/animation/show_detailed?aid=${item.animationSimple.aid}">
                                <img referrerpolicy="no-referrer" class="anime_icon1_img" src="${pageContext.request.contextPath}/${item.animationSimple.cover_img}" alt="${item.animationSimple.aname}" width="120px" height="165px">
                                <span class="anime_icon1_name1">${item.animationSimple.score}</span></a>
                            <a class="anime_icon1_name_a" href="${pageContext.request.contextPath}/animation/show_detailed?aid=${item.animationSimple.aid}">
                                <div class="anime_icon1_name">${item.animationSimple.aname}</div></a>
                        </li>
                    </c:forEach>
                </ul>

                <ul class="pagination" id="RecentlyLimit">
                    <li class="${requestScope.RecentlyLimit.hasPre() ? "" : "disabled"}"><a>上一页</a></li>
                    <c:forEach items="${requestScope.RecentlyLimit.pages}" var="item">
                        <li class="${requestScope.RecentlyLimit.currentPage == item ? "active" : ""}"><a>${item}</a></li>
                    </c:forEach>
                    <li class="${requestScope.RecentlyLimit.hasNext() ? "" : "disabled"}"><a>下一页</a></li>
                </ul>
            </div>
        </div>
        <div class="clear"></div>
    </div>


    </body>
</body>
</html>
